<template>
<div class="pay">
    <Header ></Header>

    <div class="result" v-if="result">
      <div class="result-icon">
        <img src="../images/duihao.png" alt="">
      </div>
      <div class="result-icon-text">订单支付成功</div>
        <div class="ckeckbutton">查看订单</div>
        <div class="lookbutton"> 继续逛逛</div>
      </div>
      <div class="result" v-else>
      <div class="result-icon">
        <img src="../images/cuohao.png" alt="">
      </div>
      <div class="result-icon-text">订单支付失败</div>
      <div class="paybutton"> 重新支付</div>
      </div>



    <div class="recommend">
        <div class="recommend-top">
         <div class="recomment-text">—— 商品推荐 ——</div>
        </div>
        <div class="recommend-item">
          <img src="../images/clothes.jpg" alt="" class="recommend-item-img">
          <div class="item-detai">
            <div class="text1">学生搞怪卡通冬季宽松圆</div>
            <div class="text2">
              <div class="text2-yuan">￥</div>
              <div class="text2-price">158.00</div>
              </div>
            <div class="text3">
              <div class="text3-price">￥198</div>
              <div class="text3-number">已售7430</div>
            </div>
          </div>

        </div>
        <div class="recommend-item">
          <img src="../images/clothes.jpg" alt="" class="recommend-item-img">
          <div class="item-detai">
            <div class="text1">学生搞怪卡通冬季宽松圆</div>
            <div class="text2">
              <div class="text2-yuan">￥</div>
              <div class="text2-price">158.00</div>
              </div>
            <div class="text3">
              <div class="text3-price">￥198</div>
              <div class="text3-number">已售7430</div>
            </div>
          </div>

        </div>
         <div class="recommend-item">
          <img src="../images/clothes.jpg" alt="" class="recommend-item-img">
          <div class="item-detai">
            <div class="text1">学生搞怪卡通冬季宽松圆</div>
            <div class="text2">
              <div class="text2-yuan">￥</div>
              <div class="text2-price">158.00</div>
              </div>
            <div class="text3">
              <div class="text3-price">￥198</div>
              <div class="text3-number">已售7430</div>
            </div>
          </div>

        </div>
         <div class="recommend-item">
          <img src="../images/clothes.jpg" alt="" class="recommend-item-img">
          <div class="item-detai">
            <div class="text1">学生搞怪卡通冬季宽松圆</div>
            <div class="text2">
              <div class="text2-yuan">￥</div>
              <div class="text2-price">158.00</div>
              </div>
            <div class="text3">
              <div class="text3-price">￥198</div>
              <div class="text3-number">已售7430</div>
            </div>
          </div>

        </div>
      </div>

</div>
   
</template>
<script>
import Header from "./common/Header";
export default {
     components: {
    Header,
  },
   data() {
      return {
        result:false
      }   
    }
    
}
</script>
<style lang="less">
.pay{
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  .result{
    position: fixed;
    top: 1.26rem;
    width:7.49rem;
    height:4.6rem;
    background:rgba(255,255,255,1);
    display: flex;
    justify-content: center;
    .result-icon{
      position: absolute;
      top: .71rem;
      width:1.45rem;
      height:1.45rem;
      background:rgba(126,86,198,1);
      border-radius:50%;
      margin-bottom: .32rem;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width:.53rem;
        height:.39rem;
      }
      
    }
    .result-icon-text{
       position: absolute;
       bottom: 1.84rem;
        height:.27rem;
        font-size:.28rem;
        font-family:PingFang-SC-Light;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:.27rem;
      }
     .ckeckbutton{
        position: absolute;
        left: 1rem;
          display: inline-block;
          width:2.48rem;
          height:.72rem;
          border:.02rem solid rgba(126,86,198,1);
          border-radius:.36rem;
          font-size:.28rem;
          font-family:PingFang-SC-Light;
          font-weight:bold;
          color:rgba(126,86,198,1);
          line-height:.72rem;
          text-align: center;
          bottom: .45rem;
        }
      .lookbutton{
          .ckeckbutton;
          left: auto;
          right: 1.01rem;
          color:rgba(255, 255, 255, 1);
          background:rgba(126, 86, 198, 1);
      
        }
      .paybutton{
        .lookbutton;
        left: 2.5rem;
      }

    }
  .recommend{
    width: 7.5rem;
    position: absolute;
    top: 5.86rem;
    background:rgba(247, 247, 247, 1);
    padding: 0 .23rem;
  .recommend-top{
    height: .84rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .recomment-text{
      height:.27rem;
      font-size:.27rem;
      font-family:PingFang-SC-Light;
      font-weight:bold;
      color:rgba(102,102,102,1);
      line-height:.27rem;
      position: relative;
      top: .32rem;

    }

  }
  .recommend-item{
    vertical-align: top;
    display: inline-block;
    position: relative;
    width:3.43rem;
    height:4.72rem;
    background:rgba(255,255,255,1);
    margin-bottom: .2rem;
    .recommend-item-img{
      position: absolute;
      left: .8rem;
      top: .43rem;
      width:1.87rem;
      height:2.48rem;
      margin-bottom: .49rem;

    }
    
    .item-detai{
      display: flex;
      flex-direction: column;
      position: absolute;
      bottom: .22rem;
      .text1{
        margin-left:.13rem; 
        height:.28rem;
        font-size:.28rem;
        font-family:PingFang-SC-Light;
        font-weight:bold;
        color:rgba(0,0,0,1);
        line-height:.43rem; 
        margin-bottom:.23rem;
      }
      .text2{
        display: inline-block;
          margin-bottom:.17rem;
          margin-left: .14rem;
        .text2-yuan{
           display: inline-block;
          width:.12rem;
          height:.16rem;
          font-size:.2rem;
          font-family:PingFang-SC-Medium;
          font-weight:bold;
          color:rgba(126,86,198,1);
          line-height:.35rem;
          margin-right: .07rem;
        }
        .text2-price{
           display: inline-block;
          height:.24rem;
          font-size:.31rem;
          font-family:PingFang-SC-Medium;
          font-weight:bold;
          color:rgba(126,86,198,1);
          line-height:.52rem;

        }
        
        
      }
      .text3{
        display: flex;
        font-display: row;
        margin-left: .16rem;
          .text3-price{
            height:.18rem;
            font-size:.22rem;
            font-family:PingFang-SC-Light;
            font-weight:bold;
            text-decoration:line-through;
            color:rgba(153,153,153,1);
            line-height:.18rem;
          }
          .text3-number{
            position: absolute;
            right: 0;
            height:.21rem;
            font-size:.22rem;
            font-family:PingFang-SC-ExtraLight;
            font-weight:bold;
            color:rgba(153,153,153,1);
            line-height:.21rem;
            text-align: center;

          }

        }

    


    }
    
  }
   .recommend-item:nth-of-type(odd){
    height:5.27rem ;
  }
  
  .recommend-item:nth-of-type(2n+4){
    vertical-align: top;
     transform: translateY(-.53rem);
  }
  }
  
  
  
}
 

</style>

